import React, { PureComponent, Fragment } from 'react';
import { Table, Modal, Icon, Divider, Popconfirm, message } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import styles from './../../../Municipal/Yhgl.less';
import Ellipsis from '@/components/Ellipsis';

import YhglAssignFm from './YhglAssignForm';
import YhglEditFm from './YhglEditForm';
import YhglContrast from './YhglContrast';

//权限控制
//权限控制
import { getAuthority } from '@/utils/authority';
import RenderAuthorized from '@/components/Authorized';
const Authorized = RenderAuthorized(getAuthority());

// import YhglYlybFm from './YhglYlybForm';
// import YhglYlybTable from './YhglYlybTable';
//问题状态映射
const wtztGroup = {
  '0': '待分派',
  '1': '未处理',
  '2': '处理中',
  '3': '已处理',
  '4': '退单',
  '9': '已结案',
};
@connect(({ global }) => ({
  currentUrl: global.currentUrl,
  elementAuth: global.elementAuth,
}))
class YhglTable extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      showViewMd: false, //查看,处理前后对比
      showAssignMd: false, //人工分派
      showEditMd: false, //编辑
    };
    this.dispatch = this.props.dispatch;
    this.user_id = sessionStorage.getItem('user_id');
    this.pg = {
      pageSize: 10,
      //showQuickJumper: true,
    };
    this.onChange = this.onChange.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.showViewMd = this.showViewMd.bind(this);
    this.clickItem = this.clickItem.bind(this);
  }

  componentDidMount() {
    this.getAuth();
  }

  //权限控制
  getAuth = () => {
    const { dispatch, currentUrl } = this.props;
    dispatch({
      type: 'global/fetchAuthorityElements',
      payload: { url: currentUrl },
    });
  };

  onChange(pagination, filters, sorter) {
    var qc = this.props.queryCon;
    this.pg['current'] = pagination.current;
    this.props.GetQueryProblem({
      pageindex: this.pg['current'],
      companyid: qc['companyid'],
      type: qc['type'],
      ztype: qc['ztype'],
      source: qc['source'],
      status: qc['status'],
      bovertime: qc['bovertime'],
      eovertime: qc['eovertime'],
      btime: qc['btime'],
      etime: qc['etime'],
    });
  }

  handleCancel(v) {
    var obj = {};
    obj[v] = false;
    this.setState(obj);
  }
  handleEdit = record => {
    this.setState({
      showEditMd: true,
      modalT: '编辑',
      record: record,
    });
  };
  handleDelete = record => {
    const hide = message.loading('正在删除...', 0);
    this.dispatch({
      type: 'maintain/fetchYhglDelete',
      payload: { id: record.id },
      callback: response => {
        hide();
        if (response.status) {
          message.success('删除成功');
        } else {
          message.error('删除失败');
          console.log(response.ErrorMessage);
        }
        this.props.GetQueryProblem(this.props.queryCon);
      },
    });
  };
  // 结案
  closeProblem = record => {
    const hide = message.loading('正在结案...', 0);
    this.dispatch({
      type: 'maintain/fetchYhglCloseProblem',
      payload: { id: record.id },
      callback: response => {
        hide();
        if (response.status) {
          message.success('结案成功');
        } else {
          message.error('结案失败');
          console.log(response.ErrorMessage);
        }
        this.props.GetQueryProblem(this.props.queryCon);
      },
    });
  };

  // 人工分派
  assignCo = record => {
    this.setState({
      showAssignMd: true,
      modalT: '人工分派',
      record: record,
    });
  };

  showViewMd(record) {
    var obj = {};
    obj['showViewMd'] = true;
    obj['modalT'] = '查看';
    obj['record'] = record;
    this.setState(obj);
  }

  //单击item
  clickItem(item) {
    this.props.clickItem(item);
  }

  render() {
    var p = this.props;
    var s = this.state;
    this.pg['total'] = p.yhglTbTotal;
    const { elementAuth } = this.props;
    let cols = [
      {
        title: '序号',
        dataIndex: 'Id',
        render: (text, record, index) => `${index + 1}`,
        width: 50,
      },
      {
        title: '养护单位',
        dataIndex: 'clbm',
        key: 'clbm',
        render: text =>
          this.props.yhdwList.length > 0 && text
            ? this.props.yhdwList.filter(i => i.Id == text)[0]
              ? this.props.yhdwList.filter(i => i.Id == text)[0].Name
              : null
            : null,
      },
      {
        title: '问题类型',
        dataIndex: 'cname',
        key: 'cname',
        render: (text, record) => (
          <Ellipsis length={6} tooltip>
            {record.cname ? record.cname : '' + ' ' + record.czname ? record.czname : ''}
          </Ellipsis>
        ),
      },
      {
        title: '地点描述',
        dataIndex: 'dz',
        key: 'dz',
        render: text =>
          text ? (
            <Ellipsis length={6} tooltip>
              {text.slice(6)}
            </Ellipsis>
          ) : null,
      },
      {
        title: '上报时间',
        dataIndex: 'sbsj',
        key: 'sbsj',
        width: 90,
        render: function(text) {
          return moment.unix(text.slice(6, -5)).format('YYYY-MM-DD HH:mm');
        },
      },
      {
        title: '是否超时',
        dataIndex: 'scsj',
        key: 'scsj',
        width: 80,
        render: (text, record) =>
          record && record.scsj && record.sbsj ? (
            moment(
              moment(parseInt(record.scsj.slice(6, -2))).diff(parseInt(record.sbsj.slice(6, -2)))
            ).format('HH时mm分') //HH时mm分ss秒
          ) : (
            <Icon style={{ color: record.wtzt == 1 ? 'red' : 'green' }} type="check" />
          ),
      },
      {
        title: '处理状态',
        dataIndex: 'wtzt',
        key: 'wtzt',
        width: 80,
        render: text => wtztGroup[text],
      },
      {
        title: '照片',
        dataIndex: 'wtzt',
        key: 'zp',
        render: (text, record) => (
          <a
            href="javascrips:;"
            onClick={() => this.showViewMd(record)}
            style={{ color: record && record.wtzt == 1 ? 'red' : null }}
          >
            查看
          </a>
        ),
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        render: (text, record) => (
          <span>
            {record.wtzt == '0' ? (
              // 只有未分派的，才能进行人工分派
              <span>
                <a
                  href="javascrips:;"
                  onClick={this.assignCo.bind(this, record)}
                  title="人工分派"
                  style={{ color: record && record.wtzt == 1 ? 'red' : null }}
                >
                  <Icon type="file-text" />
                </a>
                <Divider type="vertical" />
              </span>
            ) : null}
            {/* <Divider type="vertical" />
            <a
              href="javascrips:;"
              onClick={this.handleEdit.bind(this, record)}
              title="编辑"
              style={{ color: record && record.wtzt == 1 ? 'red' : null }}
            >
              <Icon type="edit" />
            </a> 
            <Popconfirm
              title="确定删除?"
              onConfirm={this.handleDelete.bind(this, record)}
              title="删除"
            >
              <a href="javascript:;" style={{ color: record && record.wtzt == 1 ? 'red' : null }}>
                <Icon type="delete" />
              </a>
            </Popconfirm>
            */}
            {record.wtzt == '3' || record.wtzt == '4' ? (
              // 只有退单和已完成的才能结案
              <Authorized authority={elementAuth['btnYLJA']}>
                <span>
                  <Popconfirm
                    title="确定结案?"
                    onConfirm={this.closeProblem.bind(this, record)}
                    title="结案"
                    disabled={true}
                  >
                    <a
                      href="javascript:;"
                      style={{ color: record && record.wtzt == 1 ? 'red' : null }}
                    >
                      <Icon type="check-square" />
                    </a>
                  </Popconfirm>
                </span>
              </Authorized>
            ) : null}
          </span>
        ),
      },
    ];

    return (
      <div>
        <Table
          className={styles.jbxxTable}
          dataSource={p.yhglTbData}
          columns={cols}
          onChange={this.onChange}
          pagination={this.pg}
          rowClassName={(record, index) => (record.wtzt === 1 ? styles.showRed : '')}
          bordered
          onRow={record => {
            return {
              onClick: this.clickItem.bind(this, record),
            };
          }}
        />
        {s.showViewMd ? (
          <Modal
            title={s.modalT}
            visible={true}
            onCancel={e => this.handleCancel('showViewMd')}
            footer={null}
            bodyStyle={{ padding: 0 }}
            width={1200}
          >
            <div className="modal_con_se">
              <YhglContrast
                parent={this}
                record={s.record}
                modalT={s.modalT}
                modalName={'showViewMd'}
                handleCancel={this.handleCancel}
              />
            </div>
          </Modal>
        ) : null}
        {s.showAssignMd ? (
          <Modal
            title={s.modalT}
            visible={true}
            onCancel={e => this.handleCancel('showAssignMd')}
            footer={null}
            bodyStyle={{ padding: 0 }}
            style={{ top: 20 }}
          >
            <div className="modal_con_se">
              <YhglAssignFm
                yhdwList={p.yhdwList}
                parent={this}
                record={s.record}
                modalT={s.modalT}
                modalName={'showAssignMd'}
                handleCancel={this.handleCancel}
                GetQueryProblem={p.GetQueryProblem}
                queryCon={p.queryCon}
              />
            </div>
          </Modal>
        ) : null}
        {s.showEditMd ? (
          <Modal
            title={s.modalT}
            visible={true}
            onCancel={e => this.handleCancel('showEditMd')}
            footer={null}
            bodyStyle={{ padding: 0 }}
          >
            <div className="modal_con_se">
              <YhglEditFm
                yhdwList={p.yhdwList}
                parent={this}
                record={s.record}
                modalT={s.modalT}
                modalName={'showEditMd'}
                handleCancel={this.handleCancel}
                GetQueryProblem={p.GetQueryProblem}
                queryCon={p.queryCon}
                wtlxList={p.wtlxList}
                sblyList={p.sblyList}
              />
            </div>
          </Modal>
        ) : null}
      </div>
    );
  }
}

export default YhglTable;
